<template>
	<view class="order_management">
		<u-cell-group>
			<u-cell-item
				:title-style="{ fontWeight: 500, color: '#000' }"
				class="me_cell"
				:title="$t('locales.allOrders')"
				:value="$t('locales.viewAll')"
				@click="navSwitch('/pages/order/list/index')"
			></u-cell-item>
		</u-cell-group>
		<view class="order_tab">
			<view class="order_tab_item" @click="navSwitch('/pages/order/list/index?type=1')">
				<view class="order_tab_icon">
					<image
						style="width: 100%;height: 100%;"
						src="../../static/iconImg/order_tab_1.png"
					></image>
					<u-badge
						type="error"
						:count="value.stayPaymentNum || 0"
						absolute
						:offset="[-15, -25]"
					></u-badge>
				</view>
				<view class="order_tab_name u-line-1">{{$t('locales.toBePaid')}}</view>
			</view>
			<view class="order_tab_item" @click="navSwitch('/pages/order/list/index?type=2')">
				<view class="order_tab_icon">
					<image
						style="width: 100%;height: 100%;"
						src="../../static/iconImg/order_tab_2.png"
					></image>
					<u-badge
						type="error"
						:count="value.stayDeliveryNum || 0"
						absolute
						:offset="[-15, -25]"
					></u-badge>
				</view>
				<view class="order_tab_name u-line-1">{{$t('locales.toBeDelivered')}}</view>
			</view>
			<view class="order_tab_item" @click="navSwitch('/pages/order/list/index?type=3')">
				<view class="order_tab_icon">
					<image
						style="width: 100%;height: 100%;"
						src="../../static/iconImg/order_tab_3.png"
					></image>
					<u-badge
						type="error"
						:count="value.stayReceivingNum || 0"
						absolute
						:offset="[-15, -25]"
					></u-badge>
				</view>
				<view class="order_tab_name u-line-1">{{$t('locales.goodsToBeReceived')}}</view>
			</view>
			<view class="order_tab_item" @click="navSwitch('/pages/order/list/index?type=4')">
				<view class="order_tab_icon">
					<image
						style="width: 100%;height: 100%;"
						src="../../static/iconImg/order_tab_4.png"
					></image>
					<u-badge
						type="error"
						:count="value.stayCancelNum || 0"
						absolute
						:offset="[-15, -25]"
					></u-badge>
				</view>
				<view class="order_tab_name u-line-1">{{$t('locales.afterSale')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {}
	},
	methods: {
		navSwitch(url) {
			if (this.$store.getters.isLogin) {
				uni.navigateTo({
					url
				})				
			} else {
				uni.navigateTo({
				    url: '/pages/user/login/index'
				});
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.order_management {
	background-color: #ffffff;
	.me_cell {
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}
	.order_tab {
		width: 100%;
		min-height: 149rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.order_tab_item {
			min-height: 149rpx;
			width: 149rpx;
			display: flex;
			flex-direction: column;
			justify-content: center !important;
			align-items: center !important;
			.order_tab_icon {
				width: 42rpx;
				height: 42rpx;
				position: relative;
			}
			.order_tab_name {
				width: 140rpx;
				overflow: hidden;
				margin-top: 15rpx;
				font-size: 24rpx;
				text-align: center;
			}
		}
	}
}
</style>
